<template>
  <!--视图-->
  <div id="app">
  {{message}}<br>
    <span v-for="u in users" :class="u.date=='2016-5-2'?myClass:''">
      {{u.date}}=={{u.name}}=={{u.age}}=={{u.city}}  <button @click="show(u)">查看</button><br>
    </span>

  </div>
</template>

<script>
export default {
  name: "UserView",
  data() {//属性
    return {
      myClass:'green',
      message:"hello vue",
      users:[{date:'2016-5-2',name:'zhangsan',age:20,city:'天津'},{date:'2016-6-2',name:'zhangsan2',age:20,city:'天津2'},{date:'2016-5-2',name:'zhangsan3',age:20,city:'天津3'}]
    }
  }, methods: {//自定义方法
    show(u){
    alert(u.date+u.name+u.age)
    }
  }, created() { //钩子函数

  }
}
</script>

<style scoped>
.green{
  background-color: green;
}
</style>